<template lang="html">
  <div>
    <Row>
      <Col span="18">
        <div v-for="root in rootCategories" class="blog-root-layout">
          <p class="blog-cate-root">{{root.name}}</p>
          <div :style="{overflow: 'hidden'}">
            <Card class="blog-cate-layout" v-for="child in root.children">
              <div class="cate-desc-layout">
                <img :src="child.photoUrl" v-holder="'img=300x250?auto=yes&random=yes&text=图片不见了!'" :style="{height: '250px', objectFit: 'contain', width: '100%', display: 'block'}" />
                <div class="cate-desc-info">
                  {{child.description ? child.description : '作者太懒，什么也没有写！' }}
                </div>
              </div>
              <div class="cate-name-detail" @click="handleBlogList(child.id)">
                {{child.name}}
              </div>
            </Card>
          </div>
        </div>
      </Col>
      <Col span="6" :style="{paddingLeft: '10px'}">
        <Card :style="{borderRadius: '0px', minHeight: '300px'}">
          <p slot="title"></p>
        </Card>
      </Col>
    </Row>
    <Button
      v-if="this.loggedIn && this.userRoles.find(role => role.authority === 'user' || role.authority === 'admin' || role.authority === 'root')"
      type="primary" shape="circle"
      icon="plus" size="large" class="icon-write-position"
      @click="createCategory = true"
    >
    </Button>
    <Modal
        v-model="createCategory"
        title="创建BlogCategory"
        :loading="createLoadin"
        @on-ok="handleCreateCategory"
    >

      <Form ref="blogCategoryForm" :model="blogCategoryForm" :rules="blogCategoryRule" :label-width="100">
        <FormItem label="名称" prop="name">
            <Input v-model="blogCategoryForm.name" placeholder="输入分类名字..."></Input>
        </FormItem>
        <FormItem label="Root">
          <i-switch v-model="blogCategoryForm.isRoot" size="large">
              <span slot="open">是</span>
              <span slot="close">否</span>
          </i-switch>
        </FormItem>
        <FormItem label="选择父类" v-if="!blogCategoryForm.isRoot">
          <Select v-model="blogCategoryForm.parentUri">
                <Option :value="root._links.self.href" v-for="root in rootCategories">
                  {{ root.name }}
                </Option>
            </Select>
        </FormItem>
        <FormItem label="背景图片地址">
          <Input v-model="blogCategoryForm.photoUrl" placeholder="输入图片地址..."></Input>
        </FormItem>
        <FormItem label="描述">
          <Input v-model="blogCategoryForm.description"
            type="textarea" placeholder="输入分类描述..."
            :autosize="{minRows: 2,maxRows: 5}"
          >
          </Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      rootCategories: [],
      blogCategoryForm: {
        name: '',
        isRoot: true,
        parentUri: '',
        photoUrl: '',
        description: '',
      },
      blogCategoryRule: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ]
      },
      createCategory: false,
      createLoadin: true,
    }
  },

  computed: {
    ...mapState(['loggedIn', 'userRoles'])
  },

  methods: {
    handleBlogList (id) {
      console.log('blog list')
      this.$router.push({name: 'BlogList', params: { categoryId: id }})
    },
    // 提交请求
    handleCreateCategory () {
      this.$refs.blogCategoryForm.validate((valid) => {
        if (valid) {
          // this.$Message.success('Success!');
          this.$store.dispatch('categoryCreationAsync', {
            name: this.blogCategoryForm.name,
            photoUrl: this.blogCategoryForm.photoUrl,
            description: this.blogCategoryForm.description,
            parentUri: this.blogCategoryForm.isRoot ? '' : this.blogCategoryForm.parentUri,
          })
          .then(res => {
            this.$Message.success('添加分类成功')
            this.createCategory = false
            this.blogCategoryForm = {
              name: '',
              isRoot: true,
              parentId: -1,
              photoUrl: '',
              description: '',
            }
            // 刷新列表
            this.handleCategoryList()
          })
          .catch(err => {
            this.$Message.error('添加分类错误')
          })
        } else {
          this.createLoadin = false
          this.$Message.error('请先确认信息是否正确');
        }
      })
    },
    // 获取category列表
    handleCategoryList () {
      this.$store.dispatch('rootCategoriesAsync')
        .then(res => {
          console.log(res.data)
          const {_embedded: {blogCategories}} = res.data
          console.log(blogCategories);
          this.rootCategories = blogCategories
        })
        .catch(error => {
          console.log(error);
        })
    }
  },

  beforeMount () {
    this.handleCategoryList()
  }
}
</script>

<style lang="css" scoped>
  .blog-root-layout {
    margin-top: 10px;
    border-bottom: 1px solid #ddd;
  }
  .blog-root-layout:first-of-type {
    margin-top: 0;
  }
  .blog-root-layout:last-of-type {
    border-bottom: none;
  }
  .blog-cate-root {
    color: #333;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 10px;
  }
  .blog-cate-layout {
    display: inline-block;
    float: left;
    width: calc(100% / 3 - 6px);
    margin-right: 9px;
    margin-bottom: 9px;
    border-radius: 0;
  }
  .blog-cate-layout:nth-of-type(n + 3) {
    margin-right: 0;
  }
  .icon-write-position {
    position: fixed;
    bottom: 50px;
    right: 50px;
  }
  .cate-desc-layout {
    position: relative;
  }
  .cate-desc-layout:hover .cate-desc-info {
    display: block;
  }
  .cate-desc-info{
    position: absolute;
    width: 100%;
    padding: 20px 10px;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    height: 50%;
    color: #fff;
    display: none;
  }
  .cate-name-detail {
    line-height: 35px;
    cursor: pointer;
    color: #333;
    font-size: 16px;
    text-align: center;
  }
  .cate-name-detail:hover {
    text-decoration: underline;
  }
</style>
